@import '@gitbutler/ui/main.css';

:root {
	--dropzone-fill: oklch(from var(--clr-scale-pop-50) l c h / 0.1);
	--dropzone-stroke: oklch(from var(--clr-scale-pop-50) l c h / 0.8);
	--dropzone-fill-hover: oklch(from var(--clr-scale-pop-50) l c h / 0.16);
	--dropzone-stroke-hover: oklch(from var(--clr-scale-pop-50) l c h / 1);
}

body {
	width: 100vw;
	height: 100vh;
	overflow-y: hidden;
	background-color: var(--clr-bg-2);
	color: var(--clr-text-1);
	user-select: none;
}

.link {
	text-decoration: underline;

	&:hover {
		text-decoration: none;
	}
}

/**
 * Prevents elements within drop-zones from firing mouse events, making
 * it much easier to manage in/out/over/leave events since they fire less
 * frequently.
 */
.drop-zone-hover * {
	pointer-events: none;
}

@keyframes dropzone-dash {
	from {
		stroke-dashoffset: 30;
	}
	to {
		stroke-dashoffset: 0;
	}
}

/* CODE */
.code-string {
	display: inline;
	word-wrap: break-word;
	padding: 1px 4px;
	border-radius: var(--radius-s);
	background: var(--clr-scale-ntrl-80);
	color: var(--clr-text-1);
	font-size: 92%;
	font-family: var(--font-mono);
}

/* TRANSITION ANIMATION */

.transition-fly {
	animation: transition-fly 0.25s forwards ease-in-out;
}

@keyframes transition-fly {
	0% {
		transform: translateY(6px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/* STATES */
.series-highlight-animation {
	backface-visibility: hidden;
	animation: series-highlight-animation 0.9s forwards;
}

@keyframes series-highlight-animation {
	0% {
	}
	40%,
	65% {
		transform: scale(1.015);
		border: 1px solid var(--highlight-color);
		box-shadow: 0 2px 7px 0 oklch(from var(--highlight-color) l c h / 0.4);
	}
	100% {
	}
}

.locked-file-animation {
	--locked-color: oklch(from var(--clr-scale-warn-50) l c h / 0.2);
	border: 1px solid var(--clr-bg-1);
	animation: locked-file-animation 1.4s ease-out forwards;
}

@keyframes locked-file-animation {
	0% {
		transform: translateX(-3px);
		background-color: var(--clr-bg-1);
	}
	10% {
		transform: translateX(3px);
		background-color: var(--locked-color);
	}
	15% {
		transform: translateX(-3px);
	}
	25% {
		transform: translateX(3px);
		background-color: var(--locked-color);
	}
	30%,
	70% {
		transform: translateX(0);
	}
	100% {
		background-color: var(--clr-bg-1);
	}
}

@keyframes row-wiggle {
	0%,
	12%,
	100% {
		transform: translateX(0px) rotate(0deg);
	}
	2% {
		transform: translateX(-3px) rotate(-0.2deg);
	}
	4% {
		transform: translateX(3px) rotate(0.2deg);
	}
	6% {
		transform: translateX(-3px) rotate(-0.2deg);
	}
	8% {
		transform: translateX(3px) rotate(0.2deg);
	}
	10% {
		transform: translateX(0px) rotate(0deg);
	}
}

.dotted-pattern {
	background-image: radial-gradient(
		oklch(from var(--clr-scale-ntrl-50) l c h / 0.13) 1px,
		#ffffff00 1px
	);
	background-size: 5px 5px;
}

.deep-shadow {
	box-shadow: 0 10px 30px 0 color(srgb 0 0 0 / 0.16);
}

.dark {
	& .deep-shadow {
		box-shadow: 0 10px 50px 5px color(srgb 0 0 0 / 0.5);
	}
}
